<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@include file="../../taglib.jsp" %>
<html>
<head>
    <title>千寻</title>
</head>
<body>
<div class="layui-form-item" style="margin-top: 10px;">
    <label class="layui-form-label">上传头像</label>
    <div class="layui-input-block">
        <input type="file" name="headImg" class="layui-upload-file" lay-title="选择文件">
    </div>
</div>
<form class="layui-form" action="${path}/personal/savePersonalInfo.do" method="post">
    <input type="hidden" name="id" value="${personal.id}">
    <div class="layui-form-item">
        <label class="layui-form-label">真实姓名</label>
        <div class="layui-input-inline">
            <input type="text" name="realName" lay-verify="required" autocomplete="off" placeholder="请输入真实姓名" class="layui-input" value="${personal.realName}" />
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">邮箱</label>
        <div class="layui-input-inline">
            <input type="text" name="email" lay-verify="email" autocomplete="off" placeholder="请输入邮箱地址" class="layui-input" value="${personal.email}">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">生日</label>
            <div class="layui-input-block">
                <input type="text" name="birthday" id="date" lay-verify="date" placeholder="请选择出生年月" autocomplete="off" class="layui-input" value="${personal.birthday}" onclick="layui.laydate({elem: this})">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">年龄</label>
            <div class="layui-input-inline">
                <input type="number" name="age" lay-verify="number" autocomplete="off" placeholder="请输入年龄" class="layui-input" value="${personal.age}">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">地址</label>
        <div class="layui-input-inline">
            <select name="province" lay-filter="province">
                <option></option>
            </select>
        </div>
        <div class="layui-input-inline">
            <select name="city" lay-filter="city">
                <option></option>
            </select>
        </div>
        <div class="layui-input-inline">
            <select name="area" lay-filter="area">
                <option></option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">街道地址</label>
        <div class="layui-input-block">
            <input type="text" name="address" lay-verify="required" placeholder="请输入街道地址" autocomplete="off" class="layui-input" value="${personal.address}">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">爱好</label>
        <div class="layui-input-block">
            <c:set value="${fn:split(personal.favorite,',')}" var="favorites" />
            <c:forEach items="${favoriteList}" var="item">
                <c:set var="contains" value="false" />
                <c:forEach var="exist" items="${favorites}" begin="0" end="${fn:length(favorites)}">
                    <c:if test="${item.id == exist }">
                        <c:set var="contains" value="true" />
                    </c:if>
                </c:forEach>
                <c:choose>
                    <c:when test="${contains == true }">
                        <input type="checkbox" id="${item.id}" value="${item.id}" name="${item.favoriteSign}" title="${item.favoriteName}" checked>
                    </c:when>
                    <c:otherwise>
                        <input type="checkbox" id="${item.id}" value="${item.id}" name="${item.favoriteSign}" title="${item.favoriteName}">
                    </c:otherwise>
                </c:choose>
            </c:forEach>
            <input type="hidden" name="favorite" id="favorite" />
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-block">
            <input type="radio" name="sex" value="0" title="男" ${personal.sex=="0"?"checked":"" } />
            <input type="radio" name="sex" value="1" title="女" ${personal.sex=="1"?"checked":"" } />
            <input type="radio" name="sex" value="2" title="保密" ${personal.sex=="2"?"checked":"" } />
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<script src="${path}/game/citys.js"></script>
<script>
    pca.init(
        'select[name=province]',
        'select[name=city]',
        'select[name=area]',
        '${personal.province}',
        '${personal.city}',
        '${personal.area}');

    //初始数据
    var $form;
    var form;
    var $;
    layui.use(['jquery', 'form', 'laydate'], function() {
        $ = layui.jquery;
        form = layui.form();
        $form = $('form');

        //监听提交
        form.on('submit(demo1)', function(data){
            /*layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            });*/
            var arr = new Array();
            var array = new Array();
            <c:forEach items="${favoriteList}" var="item">
                arr.push('${item.id}');
            </c:forEach>
            for(var i=0;i<arr.length;i++){
                if($("#"+arr[i]).is(':checked')){
                    array.push($("#"+arr[i]).val());
                }
            }
            $("#favorite").val(array);
        });
    });

    layui.upload({
        url: '${path}/personal/uploadHeadImg.do'
        ,success: function(res){
            if(res.result=='success'){
                layer.alert("头像上传成功,请按Ctrl+F5深度刷新进行查看!");
            }else{
                layer.alert("上传失败!");
            }
        }
    });
</script>
</body>
</html>
